<template>
    <div>
        <div id="container"></div>
        <div>
            <ul>
                <li v-for="(item,i) in tipList" :key="i">
                    {{item.name}}---{{item.address}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
// import {dragPicker} from '@/utils/map'
 import AMapUI from 'AMapUI';
 import AMap from 'AMap';
export default {
    data(){
        return {
            tipList:[]
        }
    },
    async mounted(){
        //加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
        AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
            var map = new AMap.Map('container',{
                zoom:16,
                scrollWheel: false
            })
            var positionPicker = new PositionPicker({
                mode:'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
                map:map//依赖地图对象
            });

            //TODO:事件绑定、结果处理等
            positionPicker.on('success', function(positionResult) {
                console.log(positionResult)
                this.tipList = positionResult.regeocode.pois;
            })

            positionPicker.on('fail', function(positionResult) {
                console.log(positionResult)
            })
            positionPicker.start();
            map.panBy(0, 1);
        });
    }
}
</script>

<style lang="scss" scoped>
    #container{
        width:100%;
        height: 200px;
        border:1px solid gray;
    }
</style>
